<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-03 19:43:48
 * @LastEditors: wuheng wuheng@szhbzc.com
 * @LastEditTime: 2025-02-19 18:27:01
 * @FilePath: \hbzc-groupmeal-center-web\src\Public-UIlibrary\pb-message\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="pb-message-box flex " :style="pbStyle" ref="messageRef" v-show="visible">

    <pb-icon :name="curIcon.name" :color="variables[curIcon.color]" size="20" class="mr-2">
    </pb-icon>
    <div class="pb-message">
      <span>{{ message }}</span>
    </div>
    <div class="ml-7  cursor-pointer" v-if="showClose" @click="visible = false">
      <pb-icon name="close" color="#000" size="12"></pb-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MessageProps } from './types'
import { getLastInstance, getLastBottomOffset } from './method'
import { withDefaults, defineProps, defineExpose } from 'vue'
import variables from "@/styles/variables.module.scss";

const props = withDefaults(defineProps<MessageProps>(), {
  duration: 2500,
  type: 'info',
  showClose: false,
  offset: 6
})


const iconList = reactive(
  [
    { type: 'info', name: 'information-solid', color: 'primary-color' },
    { type: 'qustion', name: 'qustion', color: 'primary-color' },
    { type: 'success', name: 'success', color: 'success-color' },
    { type: 'warning', name: 'warning', color: 'warning-color' },
    { type: 'error', name: 'warning', color: 'danger-color' },
    { type: 'loading', name: 'loading', color: 'primary-color' },
  ]
)

const curIcon = computed(() => {
  const curItem = iconList.findIndex(el => el.type == props.type)
  return iconList[curItem]
})



// 计算div的高度
const height = ref(0)
const messageRef = ref<HTMLDivElement>()

// 上一个实例最下面的坐标位置
const lastOffset = computed(() => getLastBottomOffset(props.id))

// 当前元素的top值
const topOffset = computed(() => lastOffset.value + props.offset)

// 下一个元素的top值
const bottomOffest = computed(() => height.value + topOffset.value)


const pbStyle = computed(() => {
  return {
    top: `${topOffset.value}px`
  }
})

const visible = ref(false)

watch(visible, (val) => {
  if (!val) {
    props.onDestroy()
  }
})

const startTimer = () => {
  if (props.duration === 0) return
  setTimeout(() => {
    visible.value = false
  }, props.duration);
}
onMounted(async () => {
  visible.value = true
  await nextTick(() => {
    height.value = messageRef.value!.getBoundingClientRect().height
  })

  startTimer()
})

defineExpose({ bottomOffest })
</script>

<style lang="scss" scoped>
.pb-message-box {
  z-index: 9999;
  width: fit-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  position: fixed;
  left: 50%;
  top: 40px;
  transform: translateX(-50%);
  align-items: center;
  background: #FFFFFF;
  box-shadow: 0px 10px 24px 0px rgba(0, 0, 0, 0.02), 0px 12px 28px 0px rgba(0, 0, 0, 0.03), 0px 14px 32px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding: 13px 16px;

  .pb-message {

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    line-height: 22px;
    text-align: left;
  }

}
</style>
